<template>
<div class="page_mian">
    <el-container direction="vertical">
    <!-- 头部区域 -->
    <el-header>
      <div class="header_rwo">
        <div class="headre_icon">
          <img src="../../../static/images/6084ce779a984.png" alt="" />
        </div>
        <div class="header_wrap">
          <div>
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item @click="hanldgo('/home')" index="1"
                >首页</el-menu-item
              >
              <el-menu-item @click="hanldgo('/applyRecord')" index="3"
                >报馆记录</el-menu-item
              >
              <el-menu-item @click="hanldgo('/order')" index="2"
                >订单中心</el-menu-item
              >
              <el-submenu index="3">
                <template slot="title">
                  <div class="title_img">
                    <img src="../../../static/images/head_pic.png" />
                    <div
                      class="username"
                    >
                      {{username}}
                    </div>
                  </div>
                </template>
                <el-menu-item @click="hanldgo('/user')" index="3-1"
                  >个人中心</el-menu-item
                >
                <el-menu-item index="3-2" @click="deletuser"
                  >退出登录</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </div>
        </div>
      </div>
    </el-header>
    <el-main>
      <!-- 路由占位符 -->
      <keep-alive exclude="Detail">
        <router-view></router-view>
      </keep-alive>
      
    </el-main>
    <el-footer>
      <div class="foot_box">
        <div class="foot_box_left">
          <div class="foot_left_left">
            <div class="foot_titel">公司业务</div>
            <div class="foot_top">
              <div class="foot_box_text">展览会主场运营服务</div>
              <div class="foot_box_text">展览馆驻场服务</div>
              <div class="foot_box_text">活动与体育赛事服务</div>
              <div class="foot_box_text">企业品牌服务</div>
            </div>
          </div>
          <div class="foot_let_right">
            <div class="foot_titel">服务指南</div>
            <div class="foot_top">
              <div class="foot_box_text">特装审图</div>
              <div class="foot_box_text">固定费用缴纳</div>
              <div class="foot_box_text">水电展具租赁</div>
              <div class="foot_box_text">申请退押金</div>
              <div class="foot_box_text">申请发票</div>
              <div class="foot_box_text">操作手册</div>
            </div>
          </div>
        </div>
        <div class="foot_box_right">
          <div>
            <div class="foot_right_titel">公司业务</div>
            <div class="foot_img">
              <img src="../../../static/images/wx_code.jpg" alt="" />
            </div>
          </div>
          <div class="foot_right_right">
            <div class="foot_right_titel">小程序</div>
            <div class="foot_img">
              <img src="../../../static/images/wx_code.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="foot_text">
        Copyright © 2021 英奇展商服务平台<span style="color: ff0000;"
          >粤ICP备16013905号-2</span
        >
        粤公网安备44030402003545号
      </div>
    </el-footer>
  </el-container>
</div>

</template>
<script>
import { removeToken, getToken } from "@/utils/auth";
export default {
  data() {
    return {
      activeIndex: "1",
      username:''
    };
  },
  created() {
    this.username  = getToken('username')
    if (
      this.$route.path == "/order" ||
      this.$route.path.includes("/orderdetails")
    ) {
      this.activeIndex = "2";
    } else if (this.$route.path == "/user") {
      this.activeIndex = "3-1";
    }else {
      this.activeIndex = "1";
    }
  },
  methods: {
    handleSelect(val) {
      this.activeIndex=val
    },
    hanldgo(path) {
      console.log(this.activeIndex);
      this.$router.push(path);
    },
    deletuser() {
      removeToken("token");
      removeToken("exhibition");
      removeToken("stan");
      removeToken("user");
      this.$router.push("/login");
    },
  },
};
</script>
<style  scoped>
.page_mian {
  height: 100%;
}
.el-container {
  min-height: 100%;
}
.el-header {
  background-color: #101528;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
}
.el-main {
  /* margin-top: 100px; */
  min-height: 580px;
  background-color: #f2f2f2 !important;
  margin: 0;
  padding: 0;
  padding-top: 70px !important;
  
}
.header_rwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headre_icon img {
  width: 150px;
  object-fit: contain;
}
/deep/ .el-menu.el-menu--horizontal {
  border: 0;
  background-color: transparent;
}
/deep/ .el-submenu__title {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .el-menu-item {
  font-size: 16px;
  color: #ffffff;
}
.title_img {
  display: flex;
}
.is-opened .title_img .username {
  color: #000;
}
.username {
  font-size: 16px;
  margin-left: 10px;
  color: #fff;
}
.title_img img {
  
  width: 40px;
  object-fit: contain;
}
/deep/.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

/deep/.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
.foot_text {
  font-size: 14px;
  text-align: center;
  color: #939393;
}
.foot_top {
  line-height: 25px;
}
.foot_box_text {
  font-size: 14px;
  color: #939393;
}
.foot_box {
  width: 50%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  padding: 40px;
}
.foot_box_left {
  flex: 1;
  display: flex;
}
.foot_titel {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.foot_right_titel {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.foot_box_right {
  flex: 1;
  display: flex;
}
.el-footer {
  background-color: #101528;
  width: 100%;
  min-height: 320px !important;
}
.foot_img img {
  width: 120px;
  object-fit: contain;
}
.foot_let_right {
  margin-left: 100px;
}
.foot_right_right {
  margin-left: 100px;
}
/deep/.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: #fff !important;
}

/deep/.is-active:nth-child(1) {
  background-color: #fff !important;
}
.user_active {
  color: #000;
}
</style>